// 入口文件
import Vue from 'vue'

//配置vuex的步骤
//1.运行cnpm i vuex -S
//2.导入包
import Vuex from 'vuex'
// 3.注册vuex到vue中
Vue.use(Vuex)
// 4.new Vuex.Store()实例，得到一个数据仓储对象

var car = JSON.parse( localStorage.getItem('car') || '[]')

var store = new Vuex.Store(
    {
        state:{        ///this.$store.state.***
            car:car        //将购物车中的商品数据，在car数组中存储商品信息，对象。id，count购买数量，price价格，selected是否在购物车中被选中
        },
        mutations:{           //this.$store.commit('方法名称'，'按需传递唯一的参数')
            addToCar(state,goodsinfo){       //点击加入购物车，把商品信息保存到store的car上
                var flag = false;
                state.car.some(item => {
                    if(item.id == goodsinfo.id){
                        item.count += parseInt(goodsinfo.count)
                        flag=true
                        return true
                    }
                })

                if(!flag){
                    state.car.push(goodsinfo)
                }
                //当更新car之后，把car数组存储到本地的localstorage中
                localStorage.setItem('car',JSON.stringify(state.car))
            },
            updateGoodsInfo(state,goodsinfo){
                // 修改购物车中商品的数量值
                state.car.some(item => {
                    if(item.id == goodsinfo.id){
                        item.count = parseInt(goodsinfo.count)
                        return true
                    }
                })
                localStorage.setItem('car',JSON.stringify(state.car))
            },
            removeFromCar(state,id){
                // 根据id，从store中的购物车中删除对应的那条商品数据
                state.car.some((item,i) => {
                    if(item.id == id){
                        state.car.splice(i,1)
                        return true;
                    }
                })

                localStorage.setItem('car',JSON.stringify(state.car))
            },
            updateGoodsSelected(state,info){
                state.car.some(item => {
                    if(item.id == info.id){
                        item.selected = info.selected
                    }
                })

                localStorage.setItem('car',JSON.stringify(state.car))
            }
        },
        getters:{          ///this.$getters.state.***
            getAllCount(state){
                var c = 0;
                state.car.forEach(item => {
                    c += item.count
                })
                return c
            },
            getGoodsCount(state){
                var o = {}
                state.car.forEach(item => {
                    o[item.id] = item.count
                })
                return o
            },
            getGoodsSelected(state){
                var o = {}
                state.car.forEach(item => {
                    o[item.id]=item.selected
                })
                return o
            },
            getGoodsCountedAndAmount(state){
                var o ={
                    count:0,
                    amount:0
                };
                state.car.some(item => {
                    if(item.selected){
                        o.count += item.count;
                        o.amount += item.price * item.count
                    }
                })
                return o
            }
        }
    }
)

// 导入路由的包
import VueRouter from 'vue-router'
// 安装路由
Vue.use(VueRouter)
// 导入自己的router.js路由模块
import router from './router.js'

//axios导入axios
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)


// 导入MUI的样式
import './lib/mui-master/examples/hello-mui/css/mui.min.css'
import './lib/mui-master/examples/hello-mui/css/icons-extra.css'

// 按需导入mint-ui的组件
// import { Header, Swipe, SwipeItem, Button,Lazyload } from 'mint-ui'
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);

import MintUI from 'mint-ui';
Vue.use(MintUI);

// 导入mint-ui的样式
import 'mint-ui/lib/style.css'

// 安装图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

import app from './App.vue'

import moment from 'moment'
Vue.filter('dateFormat',function (datastr,pattern = "YYYY-MM-DD HH:mm:ss"){
    return moment(datastr).format(pattern)
})


var vm = new Vue({
    el:'#app',
    render: c => c(app),
    router,
    store
})